<template>
  <div class="college-enrollment">
    <div class="cop-school">
      <div class="title">合作院校<span>首页 > 业务入口 > 高校模块</span></div>
      <div class="school-wrapper" :class="{'auto-height':autoHeight}">
        <div class="school-card" :class="{'active':item.active}" v-for='(item,index) in schoolData' :key="index" @click="clickSchool(index)">
          <img :src="item.img" class='school-img'>
          {{item.text}}
        </div>
      </div>
      <moreButton @seeMore='seeMore'></moreButton>
    </div>
    <div class="course-system">
      课程体系
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%">
        <el-table-column
          prop="name"
          label="名称"
          width="293">
        </el-table-column>
        <el-table-column
          prop="content"
          label="培训内容">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="122">
        </el-table-column>
      </el-table>
    </div>
    <div class="work-info">
      <div>学员就业信息</div>
      <div class="info">
        <div class="title">就业喜报</div>
        <div class="info-item" v-for='i in 8' :key='i'>恭喜荀才中进入上海博安实业有限公司<span class="date">2019-10-31</span></div>
      </div>
      <div class="line"></div>
      <div class="info">
        <div class="title">证书喜报</div>
        <div class="info-item" v-for='i in 8' :key='i'>恭喜荀才中进入上海博安实业有限公司<span class="date">2019-10-31</span></div>
      </div>
    </div>
    <coursePlan></coursePlan>
  </div>
</template>
<script>
import coursePlan from './course-plan'
import moreButton from './more-button'
import sc01 from "../img/sc01.png"
import sc02 from "../img/sc02.png"
import sc03 from "../img/sc03.png"
import sc04 from "../img/sc04.png"
import sc05 from "../img/sc05.png"
import sc06 from "../img/sc06.png"
export default {
  data(){
    return {
      autoHeight:false,      //学校包裹器的高度是否自动
      schoolData:[
        {img:sc01,text:'上海应用技术大学',active:true},
        {img:sc02,text:'上海电机学院',active:false},
        {img:sc03,text:'上海商学院',active:false},
        {img:sc04,text:'上海建桥学院',active:false},
        {img:sc05,text:'上海师范大学天华学院',active:false},
        {img:sc06,text:'上海科学职业技术学院',active:false},
      ],
      tableData: [
        {
          name: '高级网络工程师定制班',
          content: 'CCNA（RS）+HCNA(RS)+HCNP(RS)+HCIE(RS)+主流网络产品操作维护培训+项目案例实践周+考前辅导+就业推荐',
          price: '2680'
        },
        {
          name: '高级网络工程师定制班',
          content: 'CCNA（RS）+HCNA(RS)+HCNP(RS)+HCIE(RS)+主流网络产品操作维护培训+项目案例实践周+考前辅导+就业推荐',
          price: '2680'
        },
        {
          name: '高级网络工程师定制班',
          content: 'CCNA（RS）+HCNA(RS)+HCNP(RS)+HCIE(RS)+主流网络产品操作维护培训+项目案例实践周+考前辅导+就业推荐',
          price: '2680'
        },
        {
          name: '高级网络工程师定制班',
          content: 'CCNA（RS）+HCNA(RS)+HCNP(RS)+HCIE(RS)+主流网络产品操作维护培训+项目案例实践周+考前辅导+就业推荐',
          price: '2680'
        }
      ],
    }
  },
  methods:{
    clickSchool(index){   //处理点击学校
      this.schoolData = this.schoolData.map((item,idx) => {
        if(idx == index){
          item.active = true        //了谁，谁的激活状态就为true
        }else {
          item.active = false       //其余人都变为fasle
        }
        return item          //map函数必须return  返回最新状态的item
      })
      this.$router.push({name:'universitydetails'})
    },
    seeMore(up){
      // 如果up为true，即为展开状态，此刻不需要控制包裹器的高度
      // 如果up为false，即为收起状态，需要改变包裹器的高度少一点
      this.autoHeight = up
    }
  },
  mounted(){
  },
  components:{
    coursePlan,moreButton
  }
}
</script>
<style lang="stylus">
.college-enrollment
  .cop-school
    margin -136px auto 0 auto
    width: 1200px;
    min-height: 378px;
    background-color: #ffffff;
    padding 40px
    .title
      margin-bottom 35px;
      font-size: 28px;
      color: #1b1b1b;
      display flex;
      justify-content space-between;
      align-items center
      & > span
        font-size: 12px;
        color: #666666;
        // color: #404040;
    .school-wrapper
      display flex;
      flex-wrap wrap;
      max-height 167px;
      overflow hidden
      transition all 500ms;
      &.auto-height
        max-height 600px
      .school-card
        width: 180px;
        height: 167px;
        font-size: 14px;
        display inline-flex;
        flex-direction column;
        align-items center;
        justify-content center;
        border-bottom: solid 1px #dcdcdc;
        border-right: solid 1px #dcdcdc;
        font-family: MicrosoftYaHeiLight;
        color: #666666;
        &:hover
          cursor pointer
        &:nth-of-type(6n-5)
          border-left: solid 1px #dcdcdc;
        &:nth-of-type(-n+6)
          border-top: solid 1px #dcdcdc;
        &.active
          border-top 4px solid #da0800
        .school-img
          width 89px;
          height 89px;
          margin-bottom 21px
  .course-system
    margin 20px auto 0 auto
    font-size: 28px;
    color: #1b1b1b;
    padding 40px
    width: 1200px;
    max-height: 1066px;
    background-color: #ffffff;
    .el-table
      margin-top 40px
  .work-info
    margin 20px auto
    padding 40px
    width: 1200px;
    min-height: 590px;
    background-color: #ffffff;
    font-size: 28px;
    color: #1b1b1b;
    .info
      display inline-block;
      font-size: 16px;
      margin-top 30px
      .title
        display flex;
        align-items center;
        justify-content center;
        width: 116px;
        height: 40px;
        background-color: #db0801;
        font-size: 20px;
        color: #ffffff;
        margin-bottom 10px;
      .info-item
        color: #1b1b1b;
        height 55px;
        width 511px;
        display flex;
        align-items center;
        justify-content space-between
        border-bottom: solid 1px #dcdcdc;
      .date
        color: #666666;
    .line
      display inline-block;
      width: 1px;
      height: 372px;
      border: solid 1px #dcdcdc;
      margin 0 48px;
      vertical-align bottom;
</style>
